@()
@main("SSR Markers-CBGD") {

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">SSR Markers</h2>
		</div>
	</div>

	<label>Select the columns to display:</label>
	<div id="checkbox" class="checkbox">

	</div>

	<div id="toolbar">
			&nbsp;Keyword：
	</div>

	<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
	data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-search-align="left" data-multiple-search="true"
	style="table-layout: fixed;
		word-wrap: break-word"
	>
		<thead>
			<tr>
				<th data-field="name" data-sortable="true">Marker name</th>
				<th data-field="fPrimer" data-sortable="true">F primer</th>
				<th data-field="rPrimer" data-sortable="true">R primer</th>
				<th data-field="productSize" data-sortable="true">Product size</th>
				<th data-field="ssrSequences" data-sortable="true">SSR sequences</th>
				<th data-field="sourceContigs" data-sortable="true" title="Source contigs/singletons">
					Source contigs/singletons</th>
				<th data-field="forwardchr" data-sortable="true" title="Forward-Chr">Forward-Chr</th>
				<th data-field="forwardposition" data-sortable="true" title="Forward-Position">Forward-Position</th>
			</tr>
		</thead>
	</table>

	<script>
			$(function () {

				var array = ["F primer", "R primer", "Product size", "SSR sequences", "Source contigs/singletons",
					"Forward-Chr", "Forward-Position"]
				var values = ["fPrimer", "rPrimer", "productSize", "ssrSequences", "sourceContigs", "forwardchr",
					"forwardposition"]
				var html = ""
				$.each(array, function (n, value) {
							html += "<label style='margin-right: 15px'>" +
									"<input type='checkbox' checked='checked' value='" + values[n] + "' onclick=\"setColumns('" + values[n] + "')\">" + value +
									"</label>"
						}
				);
				$("#checkbox").append(html)

				$.ajax({
					url: "@routes.MarkerController.getAllSsrs()",
					type: "get",
					dataType: "json",
					success: function (data) {
						$('#table').bootstrapTable({
							data: data
						});

					}
				})

			})

			function setColumns(value) {
				var element = $("input:checkbox[value=" + value + "]")
				if (element.is(":checked")) {
					$('#table').bootstrapTable('showColumn', value);
				} else {
					$('#table').bootstrapTable('hideColumn', value);
				}
			}
	</script>
}